<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2021-12-20 15:36:59
-->
<template>
  <div ref="root" id="container" style="width: 100%; height: 100%"></div>
</template>
<script>
import { Line } from "@antv/g2plot";
import { onMounted, ref } from "vue";
export default {
  setup() {
    const root = ref(null);
    // 1.准备数据
    const data = [
      {
        Date: "2021-08-01",
        pm10: 456,
      },
      {
        Date: "2021-08-02",
        pm10: 524,
      },
      {
        Date: "2021-08-03",
        pm10: 398,
      },
      {
        Date: "2021-08-04",
        pm10: 278,
      },
      {
        Date: "2021-08-05",
        pm10: 195,
      },
      {
        Date: "2021-08-06",
        pm10: 145,
      },
      {
        Date: "2021-08-07",
        pm10: 207,
      },
    ];
    // 2.初始化图表
    function loadline() {
      const line = new Line(root.value, {
        data,
        padding: "auto",
        xField: "Date",
        yField: "pm10",
        xAxis: {
          // type: 'timeCat',
          tickCount: 5,
          label: {
            // 坐标点文字样式
            style: {
              fill: "white", // 字体颜色
              fontFamily: "微软雅黑", // 字体
              fontSize: 12, // 字体大小
            },
          },
        },
        // 设置Y轴样式
        yAxis: {
          label: {
            style: {
              fill: "white",
              fontFamily: "微软雅黑",
              fontSize: 12,
            },
          },
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
        tooltip: {
          showMarkers: false, // 列表前面标点
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "12px",
              fontFamily: "微软雅黑",
            },
          },
        },
      });

      line.render();
    }
    // 3.在vue的onmounted阶段，执行图表初始化的方法
    onMounted(() => {
      loadline();
    });

    return {
      root,
    };
  },
};
</script>